<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { unit2 } from '../unit.js'
import link from '../link.js'

defineProps({
    config: Object,
});

</script>

<template>

    <div class="avatar" :style="{
        width: unit2(config?.width, config?.width_unit),
        height: unit2(config?.height, config?.height_unit),
        borderRadius: unit2(config?.borderRadius),
    }">
        <div class="image" v-for="(item, index) in config?.list" @click="link(item)">
            <img :src="item.url" :alt="config?.name" class="objcover">
        </div>
    </div>


</template>

<style scoped>
.image {
    border: #eee 1px solid;
    flex: none;
    width: 50%;
    height: 50%;
}

.image:only-child {
    width: 100%;
    height: 100%;
}

.image:first-child:nth-last-child(n+5),
.image:first-child:nth-last-child(n+5)~.image {
    width: calc(100% / 3);
    height: calc(100% / 3);
}
.image img{width: 100%;height: 100%;}

.avatar {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
</style>